<template>
  <el-button @click="dialogFormVisible_template = true">加载报表模板</el-button>
  <el-button plain @click="dialogFormVisible_datasetList = true">加载外部数据集</el-button>
  <el-button plain @click="dialogFormVisible_datas = true">加载外部数据记录</el-button>
  <el-button @click="saveData('xzReportDesignerTabs1')">保存数据</el-button>
  <el-button @click="cleanPiniaCacheData('xzReportDesignerTabs1')">清除缓存</el-button>
  <el-button @click="cleanCanvas('xzReportDesignerTabs1')">清除画布</el-button>

  <el-dialog v-model="dialogFormVisible_template" title="加载报表模板" width="1980">
    <el-form :model="form" label-width="auto" style="max-width: 1860px"><br>
      <el-form-item label="报表config.json"><!--演示目标，json数据集， 报表元数据 -->
        <el-input v-model="form.config" type="textarea" rows="10" clearable class="scrollable-textarea"/>
      </el-form-item>
      <!--演示目标，json数据集记录 ,可以为空，默认[]-->
      <el-form-item label="报表data.json">
        <el-input v-model="form.data" type="textarea" rows="10" class="scrollable-textarea" placeholder="[]"/>
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible_template = false">Cancel</el-button>
        <el-button type="primary" @click="onSubmit">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogFormVisible_datasetList" title="加载外部数据集" width="1980">
    <el-form :model="form" label-width="auto" style="max-width: 1860px"><br>
      <el-form-item label="onUpdateDatasetList">
        <el-input v-model="form.onUpdateDatasetList" type="textarea" rows="20" clearable class="scrollable-textarea"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible_datasetList = false">Cancel</el-button>
        <el-button type="primary" @click="onSubmitDatasetList">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--
  报表设计器不需要，但是在报表预览的时候，是必须使用外部数据集的；
   特别注意：1）导入一个JSON报表模板+对应的JSON数据集记录
           2）添加外部数据集xx，
           3）添加外部数据集xx的记录
           4）在导入的模板的基础上，用xx的字段，配置到了模板中
           5）预览的时候，需要 原来模板的元数据+json记录，还需要新修改的外部数据集的记录，才可以完整的渲染；
 -->
  <el-dialog v-model="dialogFormVisible_datas" title="加载外部数据记录" width="1980">
    <el-form :model="form" label-width="auto" style="max-width: 1860px"><br>
      <el-form-item label="json">
        <el-input v-model="form.onUpdateData" type="textarea" rows="20" clearable
                  class="scrollable-textarea"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible_datas = false">Cancel</el-button>
        <el-button type="primary" @click="onSubmitDataset">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>


  <div id="xzReportDesignerTabs1" style="width: 100%; height: 100%"></div>
</template>
<script setup lang="ts">
import { queryonUpdateDataFrom} from "@/utils/onUpdateDataUtils.js";


import {onMounted, reactive, ref} from "vue";
import {usePreviewStore} from "@/stores/modules/xzPreviewStore";

const usePreStore = usePreviewStore();
const dialogFormVisible_template = ref(false);
const dialogFormVisible_datasetList = ref(false);
const dialogFormVisible_datas = ref(false);
const form = reactive({
  config: reactive([]),
  data: reactive([]),
  onUpdateDatasetList: reactive([]),
  onUpdateData: reactive([]),
})
const dataset = [ //  添加数据集按钮
  { //Json数据
    id: 1,
    value: "新建Json数据集"
  },
  { //http请求数据
    id: 2,
    value: "新建Http接口数据集"
  },
  { //API服务数据
    id: 3,
    value: "API服务数据集"
  },
  {
    id: 4,
    value: "外部数据集"
  }
];
const options = {
  row: 100,
  col: 25,
  //width: () => 1600,
  width: () => document.documentElement.clientWidth,

    // width:()=>width
  // height:()=>height
  renderArrow: true,  // 是否显式 扩展方向图标
  showFreeze: true,  // 是否显式冻结线
  showGrid: true,   // 是否显式网格线
  showPreviewToolbar: true,
  showBottombar: true,
  showSelect: true,
  dataset
}

let _onUpdateDatasetList = [];//存放所有的外部数据集
const onUpdateDatasetList = () => {
  console.log("..xzreportdesignertabs1.vue..._onUpdateDatasetList:", _onUpdateDatasetList);
  return new Promise((resolve, reject) => {
    resolve(_onUpdateDatasetList);
  })
}
options.onUpdateDatasetList = onUpdateDatasetList

let _onUpdateData = [];//存放所有的数据记录
// datasets => [{name:"数据表名称",id:"数据表id"...}]  参与获取数据的数据集
// params => [{name:"参数名称",value:"参数值"}]  value的类型是字符串或者数组
// 该方法的返回值是一个Promise
const onUpdateData = (datasets, params) => {
  console.log("..xzreportdesignertabs1.vue....datasets:", datasets);
  console.log("..xzreportdesignertabs1.vue....params:", params);
  return new Promise((resolve, reject) => {
    resolve(queryonUpdateDataFrom(datasets,params, _onUpdateData));
  })
}
options.onUpdateData = onUpdateData

const loadData = () => {
  if (form.config == null) return;
  let sheetConfig = JSON.parse(form.config);
  console.log('...data:',form.data);
  let data = JSON.parse(form.data);
  // if (form.onUpdateDatasetList.length > 0) {
  //   _onUpdateDatasetList = JSON.parse(form.onUpdateDatasetList);
  // }
  // data.forEach((dataItem) => {
  //   if (dataItem.type === '4' || dataItem.type === 4) {
  //     console.log(".xzreportdesignertabs1.vue..报表设计器的保存：config+data的模式，data的信息只有json一种模式：1）json的数据集结构和数据记录，这里不应该出现type=4的外部数据集记录，应该修改");
  //     dataItem.type = "1";//记住，这里是报表设计器的回显；不是报表展现端的回显，所以必须为1；
  //   } else {
  //     console.log("...xzreportdesignertabs1.vue.....其他数据类型:", dataItem.type);
  //   }
  // })
  try {
    sheetDesign.loadData({config: sheetConfig, data: data});
  } catch (e) {
    console.log("---.xzreportdesignertabs1.vue..----sheetDesign.loadData({config:sheetConfig,data:data});error...", e);
  }

}
const onSubmit = () => {
  loadData();
  dialogFormVisible_template.value = false;
}
const onSubmitDatasetList = () => {
  if (form.onUpdateDatasetList.length > 0) {
    _onUpdateDatasetList = JSON.parse(form.onUpdateDatasetList);
  }
  dialogFormVisible_datasetList.value = false;
  console.log("...xzreportdesignertabs1.vue...onsubmitdatasetlist,_onUpdateDatasetList:", _onUpdateDatasetList)
}
const onSubmitDataset = () => {
  if (form.onUpdateData.length > 0) {
    _onUpdateData = JSON.parse(form.onUpdateData);
  }
  dialogFormVisible_datas.value = false;
}
const on_dataset_edited = (dataset)=>{
  console.log("...dataset_edited...,dataset:",dataset);
}
// 绑定授权码
//XZReport.setKey(授权码)  //可以在localhost/127.0.0.1环境下使用
let sheetDesign;
onMounted(() => {
  sheetDesign = XZReportDesigner("#xzReportDesignerTabs1", options);
  // 监听 编辑数据集事件
  sheetDesign.on("dataset-edited",on_dataset_edited);
})

function saveData(reportDesignerPreviewId) {
  // config 为报表配置 ， data为 数据配置

  const {config, data} = sheetDesign.getData(); //报表设计器的保存事件
  usePreStore.cleanReportDesignerPreviewData(reportDesignerPreviewId);
  usePreStore.saveReportDesignerPreviewData(reportDesignerPreviewId, config, data,_onUpdateDatasetList,_onUpdateData);
  //console.log(".xzreportdesignertabs1.vue..sheetDesign.getData():", sheetDesign.getData());

}

function cleanPiniaCacheData(reportDesignerPreviewId) {
  // config 为报表配置 ， data为 数据配置

  usePreStore.cleanReportDesignerPreviewData(reportDesignerPreviewId);

}

const cleanCanvas = (div_id) => {
  document.getElementById(div_id).innerHTML = "";//不可以缺少，因为点击preview时候，config是有可能变了。

  form.config = reactive([]);
  form.data = reactive([]);
  form.onUpdateDatasetList = reactive([]);
  form.onUpdateData = reactive([]);
  _onUpdateData=[];
  _onUpdateDatasetList=[];

try {
  sheetDesign = XZReportDesigner("#xzReportDesignerTabs1", options);
  sheetDesign.on("dataset-edited",on_dataset_edited)

} catch (e) {
  console.log("..xzreportdesignertabs1.vue......cleanCanvas:", e);
}
}
</script>
<script lang="ts">
export default {
  name: "xzReportDesignerTabs1"
}
</script>
<style scoped>

</style>
